<template>
	<view >
		<!--  -->
		<view class="item item-left" v-if="userInfo.id!=item.user_id" >
			<view class="avatar">
				<image :src=" baseURL + '/' + item.avatar" />
			</view>
			<view v-if="item.type==2" class="bubble-img flex ">
				<image :src="item.message" mode="widthFix" @click="lookImg"></image>
			</view>
			<view v-else-if="item.type==6" class="bubble-place">
				<view class="" @click="openAddress(item.message)">
					<view class=" line-1" style="padding: 10rpx;" >
						{{JSON.parse(item.message).name}}
					</view>
					<view class="xxs line-1" style="color: #A5A5A5; padding: 10rpx;" v-if="!!JSON.parse(item.message).detail">
						{{JSON.parse(item.message).detail}}
					</view>
					<view class="place-img flex-content">
						<image src="/static/images/map1.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view v-else-if="item.type==3" class="bubble-video">
			
					<!-- {{item.message}} -->
					<video style="width:300rpx;border-radius: 20rpx; border: 2rpx solid transparent;" :src="item.message" :controls="false" :show-center-play-btn="false" object-fit="cover" ></video>
					<view class="video-icon"><image src="../../static/images/viedo-icon.png" mode=""></image></view>
				
			</view>
			<view v-else class="bubble bubble-left" style="display: flex;align-items: center;">
				<block v-if="item.type==1" >
					{{item.message}}
				</block>
				
				<block v-if="item.type==4">
					<image :src="item.message" mode=""  style="width: 120upx;height: 120upx;"></image>
				</block>
				<block v-if="item.type==5">
					<image src="../../static/images/v_left.png" mode="" style="width: 40upx;height: 30upx;"></image>
					<view class="flex row-right" @click="paly(item.message,item.id)" 
					:class="playMsgid == item.id?'play':''"
					:style="'width: '+ JSON.parse(item.message).time*10  +'' + 'px;'"
					style="min-width: 50px;max-width: 120px;"
					>
						<view class="m-r-10" v-if="$u.test.jsonString(item.message)" >
							{{JSON.parse(item.message).time + "''"}}
						</view>
						
					</view>
				</block>
				<block v-if="item.type==6">
					<view class="" @click="openAddress(item.message)">
						<view class="" >
							{{JSON.parse(item.message).name}}
						</view>
						<view class="xxs" style="color: #A5A5A5;" v-if="!!JSON.parse(item.message).detail">
							{{JSON.parse(item.message).detail}}
						</view>
					</view>
				</block>
			</view>
		</view>
		<view class="item item-right"  v-if="userInfo.id==item.user_id"  >
			<view class="flex m-r-10" v-if="item.is_send" :id="item.sn">
				<u-loading mode="flower"></u-loading>
			</view>
			<view v-if="item.type==2" class="bubble-img flex row-end">
				<image :src="item.message" mode="widthFix" @click="lookImg"></image>
			</view>
			<view v-else-if="item.type==6" class="bubble-place">
				<view class="" @click="openAddress(item.message)">
					<view class=" line-1" style="padding: 10rpx;" >
						{{JSON.parse(item.message).name}}
					</view>
					<view class="xxs line-1" style="color: #A5A5A5; padding: 10rpx;" v-if="!!JSON.parse(item.message).detail">
						{{JSON.parse(item.message).detail}}
					</view>
					<view class="place-img flex-content">
						<image src="/static/images/map1.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view v-else-if="item.type==3" class="bubble-video" @click="openVideo">
				<!-- {{item.message}} -->
				<video style="width:300rpx;border-radius: 20rpx; border: 2rpx solid transparent;" :src="item.message" :controls="false" :show-center-play-btn="false" object-fit="cover" ></video>
				<view class="video-icon"><image src="../../static/images/viedo-icon.png" mode=""></image></view>
			</view>
			
			<view v-else class="bubble bubble-right flex" >
				<block v-if="item.type==1" >
					{{item.message}}
				</block>
				
				<block v-if="item.type==4">
					<image :src="item.message" mode=""  style="width: 120upx;height: 120upx;"></image>
				</block>
				<block v-if="item.type==5">
					<view class="flex row-right" @click="paly(item.message,item.id)" 
					:class="playMsgid == item.id?'play':''"
					:style="'width: '+ JSON.parse(item.message).time*10  +'' + 'px;'"
					style="min-width: 50px;max-width: 120px;"
					>
						<view class="m-r-10" v-if="$u.test.jsonString(item.message)" >
							{{JSON.parse(item.message).time + "''"}}
						</view>
						<image src="../../static/images/v_left.png" mode="" style="width: 40upx;height: 30upx;transform: rotate(180deg);"></image>
					</view>
				</block>
				
			</view>
			<view class="avatar">
				<image :src="baseURL + '/' +  item.avatar" />
			</view>
		</view>
	</view>
</template>
<!-- 聊天数据展示 -->

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		baseURL
	} from '@/config/app'
	export default {
		name:"chat-detail",
		data() {
			return {
				select:true,baseURL,
				time:'',
				playMsgid:null
			};
		},
		props:{
			item:{
				type:Object,
				default:()=>{}
			},
		},
		beforeMount() {
			// console.log(this.$store.state.app.userInfo.id);	
			// if(this.item.user_id==this.$store.state.app.userInfo.id){
			// 	this.select = false
			// }
		},
		methods:{
			openVideo(){
				this.$emit("openvideo",this.item.message)
			},
			openAddress(message){
				let res = JSON.parse(message);
				let {longitude,latitude,name,detail} = res
			
				uni.openLocation({
					name:detail,
					address:name,
					longitude,
					latitude,
					success:res=>{
						
					}
				})
			},
			paly(message,id){
				this.playMsgid = id;
				this.$emit('play',message)
			},
			lookImg(){
				
				
				let arr = [];
				arr[0] = this.item.message
				uni.previewImage({
					current:0,
					urls:arr
				})
			}
		},
		computed: {
			...mapGetters(["userInfo"]),
		}
	}
</script>

<style scoped lang="scss">
	          .bubble-video{
				  width: 300rpx;
					border-radius: 10rpx;	
					position: relative;
					}
					.video-icon{
						image{
							width: 100rpx;
							height: 100rpx;
						}
						position: absolute;
						top: 40%;
						left: 35%;
					}
					.item-left .bubble-video{
						margin-left: 15px;
					}
	.item-right  .bubble-video{
				margin-right: 15px;	
			
				
					}
		.item-right  .bubble-place{
			width: 500upx;
			
	
		
			color: #000;
			/* word-break: ; */
			word-wrap:break-word;
			word-break:break-all; 
			margin-right: 15px;
			position: relative;
			
			border-radius: 10rpx;
			background-color: #FFFFFF;
		
		}
		.item-left .bubble-place{
			width: 500upx;
			color: #000;
			/* word-break: ; */
			word-wrap:break-word;
			word-break:break-all; 
			margin-left: 15px;
			position: relative;
			
			border-radius: 10rpx;
			background-color: #FFFFFF;
		
		}
		.item-left .bubble-place:before{
	        content: "";
	        position: absolute;
	        width: 0;
	        height: 0;
	        border-left: 10px solid transparent;
	        border-top: 10px solid transparent;
	        border-right: 10px solid #fff;
	        border-bottom: 10px solid transparent;
	        left: -20px;
	    }
		.item-right .bubble-place:before{
		  content: "";
		  position: absolute;
		  width: 0;
		  right: -18px;
		  height: 0;
		  border-left: 10px solid #ffffff;
		  border-top: 10px solid transparent;
		  border-right: 10px solid transparent;
		  border-bottom: 10px solid transparent;
		
		}
	    .bubble{
	        max-width: 400upx;
	        padding: 10upx;
	        border-radius: 10upx;
	        position: relative;
	        color: #000;
			/* word-break: ; */
	        word-wrap:break-word;
	        word-break:break-all; 
	    }
		.item-right .bubble-img{
			margin-right: 15px;
			
			border-radius: 10rpx;
			overflow: hidden;
			
	
			image{
			max-width: 500rpx;
			}
			
		}
	    .item-left .bubble{
			
	        margin-left: 15px;
	        background-color: #fff;
	    }
		   .item-left  .bubble-img{
			    margin-left: 15px;
			   border-radius: 10rpx;
			   overflow: hidden;
			 
			   image{
				max-width: 500rpx;
			   }
			   
		   }
	    .item-left .bubble:before{
	        content: "";
	        position: absolute;
	        width: 0;
	        height: 0;
	        border-left: 10px solid transparent;
	        border-top: 10px solid transparent;
	        border-right: 10px solid #fff;
	        border-bottom: 10px solid transparent;
	        left: -20px;
	    }
	    .item-right .bubble{
	        margin-right: 15px;
	        background-color: #9eea6a;
	    }
	    .item-right .bubble:before{
	        content: "";
	        position: absolute;
	        width: 0;
	        height: 0;
	        border-left: 10px solid #9eea6a;
	        border-top: 10px solid transparent;
	        border-right: 10px solid transparent;
	        border-bottom: 10px solid transparent;
	        right: -20px;
	    }
	    .item{
	        margin-top: 15px;
	        display: flex;
	        width: 100%;
	    }
	    .item.item-right{
	        justify-content: flex-end;
	    }
	    .item.item-center{
	        justify-content: center;
	    }
	    .item.item-center span{
	        font-size: 12px;
	        padding: 2px 4px;
	        color: #fff;
	        background-color: #dadada;
	        border-radius: 3px;
	        -moz-user-select:none; /*火狐*/
	        -webkit-user-select:none; /*webkit浏览器*/
	        -ms-user-select:none; /*IE10*/
	        -khtml-user-select:none; /*早期浏览器*/
	        user-select:none;
	    }
	
	    .avatar image{
	        width: 70upx;
	        height: 70upx;
	        border-radius: 50%;
	    }
	    .input-area{
	        border-top:0.5px solid #e0e0e0;
	        height: 150px;
	        display: flex;
	        flex-flow: column;
	        background-color: #fff;
	    }
	   
	   .place-img{
		   width: 100%;
		   overflow: hidden;
		   overflow: hidden;
		   border-radius: 0rpx 0rpx 10rpx 10rpx;
		   image{
			   width: 100%;
		   }
	   } 
</style>
